{include file="index/_meta" /}
    <title>订单管理</title>
</head>
<body>
<div id="app">
    <van-nav-bar
            title="订单管理"
            left-text="我的"
            left-arrow
            @click-left="jumpUser"
    ></van-nav-bar>

    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">

        <van-tabs v-model="activetabs" swipeable @click="onTabsClick" animated sticky>
            <van-tab v-for="(item,i) in tabs" :key="i" :title="item.title" :name="item.name">
                <van-list
                        v-model="loading"
                        :finished="finished"
                        finished-text="没有更多了"
                        @load="onLoad">
                    <div class="goodsDiv" v-for="(item,i) in orderList" :key="i"  @click="jumpDetail(item.id)">
                        <van-card
                                :title="item.goods_title"
                                :lazy-load="yes"
                                :tag="item.buy_mode_text"
                        >
                            <template #thumb>
                                <img :src="item.img_thumb" style="width: 100%;">
                            </template>
                            <template #tags>
                                <van-row style="margin-top: 10px;">
                                    <van-col span="24">订单编号：{{item.order_sn}}</van-col>
                                    <van-col span="12">总价：<b style="color: #FF5722;font-size: 14px;">￥{{item.total_price}}</b></van-col>
                                    <van-col span="12" style="text-align: right;" v-if="item.order_status == 10">订单状态：<b style="color:#FF5722;">{{item.order_status_text}}</b></van-col>
                                    <van-col span="12" style="text-align: right;" v-else-if="item.order_status == 20">订单状态：<b style="color:#FF5722;">{{item.order_status_text}}</b></van-col>
                                    <van-col span="12" style="text-align: right;" v-else-if="item.order_status == 30">订单状态：<b style="color:#1E9FFF;">{{item.order_status_text}}</b></van-col>
                                    <van-col span="12" style="text-align: right;" v-else-if="item.order_status == 40">订单状态：<b style="color:#FF5722;">{{item.order_status_text}}</b></van-col>
                                    <van-col span="12" style="text-align: right;" v-else>订单状态：<b style="color:#FFB800;">{{item.pay_status_text}}</b></van-col>
                                </van-row>
                            </template>
                            <template #price>
                                单价：￥{{item.price}}
                            </template>
                            <template #num>
                                购买数量：{{item.num}}
                            </template>
                        </van-card>
                    </div>
                </van-list>
            </van-tab>
        </van-tabs>
    </van-pull-refresh>

    {include file="store/_tabbar" /}
</div>
<script>
    new Vue({
        el: "#app",
        data(){return{
            active:2,
            activetabs:0,
            isLoading:false,
            loading:false,
            yes:true,
            page: 0,
            last_page: 1,
            limit: 10,
            finished: false,
            orderList:[],
            user_id:null,
            tabName:0,
            tabs:[
                {title:'全部',name:0},
                {title:'待支付',name:10},
                {title:'待核销',name:30},
                {title:'已完成',name:50},
                {title:'已取消',name:20},
            ],
            shop_id:"{$Think.session.wechat.shop_id}"
        }},
        created(){
            this.onRefresh()
        },
        methods:{
            onTabbarChange(index){
                let url = '';
                switch (index) {
                    case 0:url = "{:url('store/index')}";break;
                    case 1:url = "{:url('store/goods_index')}";break;
                    case 2:url = "{:url('store/order_index')}";break;
                    case 3:url = "{:url('store/info_index')}";break;
                }
                window.location.href = url;
            },
            jumpUser(){
                window.location.href = "{:url('user/index')}"
            },
            onRefresh(){
                this.page = 0
                this.last_page = 1
                this.orderList = []
                this.onLoad()
            },
            // 下拉加载更多
            onLoad() {
                this.page ++
                this.loading = true
                if (this.last_page < this.page){
                    this.finished = true
                }else{
                    this.getOrderList()
                }
            },
            // 获取订单列表
            getOrderList(){
                let that = this
                let params = {}
                params.limit = this.limit
                params.page = this.page
                params.shop_id = this.shop_id
                params.order_status = this.tabName

                axios.post("{:url('store/getOrderList')}",params).then(function (res) {
                    let ret = res.data
                    console.log(ret)
                    if (that.page <= 1){
                        that.orderList = ret.data.data
                    }else{
                        for (var i = 0,len=ret.data.length;i<len;i++){
                            that.orderList.push(ret.data[i])
                        }
                    }

                    that.loading = false
                    that.isLoading = false
                    that.last_page = ret.data.last_page
                })
            },
            // 取下订单
            cancelOrder(order_id,index){
                let that = this
                Dialog.confirm({
                    title: '提示',
                    message: '确定要取消订单吗？'
                }).then(() => {
                    that.request({
                        url:'order/cancelOrder',
                        params:{order_id:order_id}
                    }).then(function (ret) {
                        if (ret.code == 0){
                            Notify({type:'success',message:ret.msg})
                            that.orderList[index]['order_status'] = 20
                            that.orderList[index]['order_status_text'] = '已取消'
                        }else{
                            Notify({type:'danger',message:ret.msg})
                        }
                    })
                });
            },
            jumpDetail(order_id){
                window.location.href = "{:url('store/order_detail')}?order_id="+order_id;
            },
            onTabsClick(name){
                this.tabName = name
                this.page = 0
                this.last_page = 1
                this.orderList = []
                this.onLoad()
            }
        },
    })
</script>
</body>
</html>
